<template>
    <div class="content">
        <div class="index-header-box" id="head">
            <div class="index-header">
                <div @click="$router.back(-1)" class="back">
                    <van-icon name="arrow-left"/>
                </div>
                <div class="title">我的收藏</div>
            </div>
        </div>

        <van-row class="page-block" v-if="list.length>0">
            <div class="inx-public-title">
                <img class="icon" src="@/assets/images/icon/three.svg">
                <span class="text">我收藏的车辆</span>

                <router-link :to="{name:'userCollectCar'}" class="more">更多</router-link>
            </div>
            <div class="list-cell">
                <template v-for="(item,index) in list">
                    <div class="media-list">
                        <van-swipe-cell>
                            <router-link :to="{name:'buyDetail',query:{id:item.user_car_id}}">
                                <van-image fit="cover" class="media-list-logo pull-left" :class="{'sell':item.sell_status==1}" lazy-load
                                           :src="img(item.car.series_thumb,item.head_img)">
                                    <template v-slot:loading>
                                        <van-loading type="spinner" size="20"/>
                                    </template>
                                </van-image>
                            </router-link>
                            <div class="media-list-body pull-left">
                                <div class="media-list-text-top">{{item.car.car_name}}</div>
                                <div class="media-list-text-tps">{{stampToDate(item.card_time,2)}}/{{item.mileage}}公里
                                </div>
                                <div class="media-list-text-bottom">
                                    <span class="pull-left">{{item.price}}万</span>
                                </div>
                                <ul class="pull-right msg-num">
                                    <li class="item good">{{item.good_numb||0}}</li>
                                    <li class="item star">{{item.collectCount||0}}</li>
                                    <li class="item book">{{item.msgCount||0}}</li>
                                </ul>
                            </div>

                            <template slot="right">
                                <van-button class="list-btn del" text="删除" @click="del(item.coll_id)"/>
                                <van-button square class="list-btn" :to="{name:'buyPk',query:{id:item.uc_id}}"
                                            text="对比"/>
                            </template>
                        </van-swipe-cell>
                    </div>
                </template>
            </div>

        </van-row>
        <van-row class="page-block" v-if="articles.length>0">
            <div class="inx-public-title">
                <img class="icon" src="@/assets/images/icon/write.svg">
                <span class="text">我收藏的文章</span>

                <router-link :to="{name:'userCollectArticle'}" class="more">更多</router-link>
            </div>

            <div class="list-cell no-border">
                <div v-for="item in articles">
                    <div class="media-msg-list">
                        <van-swipe-cell>
                            <router-link :to="{name:'msgDetail',query:{id:item.article_id}}">
                                <van-image fit="cover" class="media-list-logo pull-left" lazy-load :src="img(item.article?item.article.thumb:'')">
                                    <template v-slot:loading>
                                        <van-loading type="spinner" size="20"/>
                                    </template>
                                </van-image>
                            </router-link>

                            <div class="media-list-body pull-left">
                                <div class="media-list-text-top">{{item.article.title}}</div>
                                <div class="media-list-text-tps">
                                    <span class="pull-left">发布者：{{item.article.author}}</span>
                                    <span class="pull-right">{{stampToDate(item.article.publish_time)}}</span>
                                </div>
                                <ul class="pull-right msg-num">
                                    <li class="item good">{{item.article.good_numb||0}}</li>
                                    <li class="item star">{{item.collectCount||0}}</li>
                                    <li class="item book">{{item.msgCount||0}}</li>
                                </ul>
                            </div>
                            <template slot="right">
                                <van-button class="list-btn del" text="删除" @click="delArt(item.id)"/>
                            </template>
                        </van-swipe-cell>
                    </div>
                </div>
            </div>
        </van-row>


    </div>
</template>

<script>
    import {Dialog} from 'vant';

    export default {
        name: "user_collect",
        components: {},
        data() {
            return {
                list: [],
                articles: [],
            }
        },
        computed: {},
        mounted: function () {
            this.onLoad();
        },
        methods: {
            onLoad() {
                let that = this;
                this.$api.member.getCollect().then(res => {
                    res = res.data;

                    this.list = res.data.carList.data;
                    this.articles = res.data.article.data;
                });
            },
            //删除收藏车辆
            del(id) {
                Dialog.confirm({
                    message: "是否删除此收藏车辆？"
                }).then(() => {
                    this.$api.member.delCollect(id, {}).then(res => {
                        if (res.data.status === 1) {
                            this.onLoad();
                        } else {
                            Dialog.alert({
                                message: res.data.msg
                            }).then();
                        }


                    });

                });

            },

            //删除收藏文章
            delArt(id) {
                Dialog.confirm({
                    message: "是否删除此收藏文章？"
                }).then(() => {
                    this.$api.member.delArticle(id).then(res => {
                        if (res.data.status === 1) {
                            this.onLoad();
                        } else {
                            Dialog.alert({
                                message: res.data.msg
                            }).then();
                        }


                    });

                });

            },

        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/user.scss";
</style>
